<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>

    <div th:include="sys/header :: copy"></div>
    <title>欢迎页</title>
    <style>
        .pro_name a {
            color: #4183c4;
        }

        .osc_git_title {
            background-color: #fff;
        }

        .osc_git_box {
            background-color: #fff;
        }

        .osc_git_box {
            border-color: #E3E9ED;
            margin: 20px;
        }

        .osc_git_info {
            color: #666;
        }

        .osc_git_main a {
            color: #9B9B9B;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <template>
        <div class="blocks">
            <div class="block-item"
                 v-for="(item,key) in BLOCKS" :key="key">
                <div class="block-item-left">
                    <svg class="icon" aria-hidden="true"
                         :style="{fill: item.bgColor}">
                        <use :xlink:href="`#${item.icon}`"></use>
                    </svg>
                </div>
                <div class="block-item-right">
                    <p>{{item.text}}</p>
                    <count-to
                            :ref='key'
                            :prefix="item.prefix || ''"
                            :style="{color: item.bgColor}"
                            :end-val="item.endVal"
                            :decimals="item.decimals || 0"
                            :duration='duration'></count-to>
                </div>
            </div>
        </div>
    </template>
</div>

<div id="main" style="width: 1200px;height:400px;"></div>
<div id="tupian" style="width: 1200px;height:400px;"></div>
<div id="yeji" style="width: 1200px;height:400px;"></div>
<div id="dataTop" style="width: 1200px;height:400px;"></div>

</body>
<style>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

    .blocks {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 16px;
    }

    .block-item {
        width: 320px;
        height: 130px;
        display: flex;
        border-radius: 8px;
        box-shadow: 1px 1px 5px 1px rgba(205, 205, 205, 0.53);
    }

    .block-item:hover {
        margin-top: -8px;
        transition: all .3s;
    }

    .block-item-left {
        height: 130px;
        width: 130px;
        padding: 20px;
    }

    .block-item-left .icon {
        height: 90px;
        width: 90px;
    }

    .block-item-right {
        flex: 1;
        text-align: right;
        padding: 20px 20px 20px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .block-item-right p {
        font-size: 18px;
        line-height: 18px;
        font-weight: 500;
        padding: 8px 0;
    }

    .block-item-right span {
        font-size: 26px;
        line-height: 26px;
        font-weight: 600;
        padding: 10px 0;
    }
</style>
<script th:src="@{/js/vue-count-to.min.js}"></script>
<script th:src="@{/js/iconfont.js}"></script>
<script type="text/javascript">
    var dataCount;
    var gradeData;
    var userData;
    var orderData;
    var dataTop;





    Ajax.request({
        url: "../admin/data/list",
        successCallback: function (r) {
            dataCount = r.data;
            // that.BLOCKS.userTotal.endVal = data.userCount;
            // that.BLOCKS.salseAmount.endVal = data.orderPriceNum
            // that.BLOCKS.todayOrders.endVal = data.orderNum
            // that.BLOCKS.userTotal.endVal = data.userNum
            // console.log(that.BLOCKS.shopTotal)
        }
    });
    Ajax.request({
        url: "../admin/data/gradeData",
        successCallback: function (r) {
            gradeData = r.data;
        }
    });

    Ajax.request({
        url: "../admin/data/userData",
        successCallback: function (r) {
            userData = r.data;
        }
    });
    Ajax.request({
        url: "../admin/data/orderData",
        successCallback: function (r) {
            orderData = r.data;
        }
    });
    Ajax.request({
        url: "../admin/data/dataTop",
        successCallback: function (r) {
            dataTop = r.data;
        }
    });

    var vm = {
        el: '#app',
        data() {
            return {
                duration: 8888,
                BLOCKS: {
                    todayOrders: {
                        text: '今日订单',
                        bgColor: '#2EB799',
                        startVal: 0,
                        endVal: 100,
                        icon: 'icon-dingdan'
                    },
                    yesterdayOrders: {
                        text: '昨日订单',
                        bgColor: '#2EB799',
                        startVal: 0,
                        endVal: 100,
                        icon: 'icon-dingdan'
                    },
                    todayUserTotal: {
                        text: '今日新增用户',
                        bgColor: '#FFB075',
                        startVal: 0,
                        endVal: 100,
                        icon: 'icon-yonghu'
                    },
                    yesterdayUserTotal: {
                        text: '昨日新增用户',
                        bgColor: '#FFB075',
                        startVal: 0,
                        endVal: 100,
                        icon: 'icon-yonghu'
                    },
                    countFind: {
                        text: '待上级审核订单',
                        bgColor: '#2EB799',
                        startVal: 0,
                        endVal: 100,
                        icon: 'icon-dingdan'
                    },
                    countCompany: {
                        text: '待公司审核订单',
                        bgColor: '#2EB799',
                        startVal: 0,
                        endVal: 100,
                        icon: 'icon-dingdan'
                    },
                    userReviewed: {
                        text: '待授权审核',
                        bgColor: '#2EB799',
                        startVal: 0,
                        endVal: 100,
                        icon: 'icon-dingdan'
                    },
                    rechargeLogCount: {
                        text: '待充值审核',
                        bgColor: '#2EB799',
                        startVal: 0,
                        endVal: 100,
                        icon: 'icon-dingdan'
                    },
                    upgradeCount: {
                        text: '待升级审核',
                        bgColor: '#2EB799',
                        startVal: 0,
                        endVal: 100,
                        icon: 'icon-dingdan'
                    },
                }
            }
        },
        created() {
            console.log('Vue初始化')
            console.log(this.BLOCKS)
            let that = this
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var tupian = echarts.init(document.getElementById('tupian'));
            var yeji = echarts.init(document.getElementById('yeji'));
            var dataTop = echarts.init(document.getElementById('dataTop'));
            var data = "";
            that.BLOCKS.yesterdayOrders.endVal = dataCount.yesterdayOrderCount;
            that.BLOCKS.todayOrders.endVal = dataCount.orderCount;
            that.BLOCKS.todayUserTotal.endVal = dataCount.userCount;
            that.BLOCKS.yesterdayUserTotal.endVal = dataCount.yesterdayUserCount;
            that.BLOCKS.countFind.endVal = dataCount.countFind;
            that.BLOCKS.countCompany.endVal = dataCount.countCompany;
            that.BLOCKS.rechargeLogCount.endVal = dataCount.rechargeLogCount;
            that.BLOCKS.upgradeCount.endVal = dataCount.upgradeCount;
            that.BLOCKS.userReviewed.endVal = dataCount.userReviewed;
            yeji.setOption(option3);
            myChart.setOption(option);
            tupian.setOption(option2);
            dataTop.setOption(option4);
            //     }
            // });
        },
        // mounted() {
        //     for (let key in  this.BLOCKS) {
        //         console.log('mounted')
        //         this.$refs[key][0].start()
        //     }
        // }
    };
    option3 = {
        title: {
            text: '交易金额'
        },
        xAxis: {
            type: 'category',
            data:orderData.strings
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: orderData.integers,
            type: 'line'
        }]
    };
    option2 = {
        title: {
            text: '会员及代理增长数'
        },
        xAxis: {
            type: 'category',
            data: userData.strings
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: userData.integers,
            type: 'line'
        }]
    };
    option4 = {
        title: {
            text: '会员及代理模块TOP10统计'
        },
        xAxis: {
            type: 'category',
            data: dataTop.strings
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: dataTop.integers,
            type: 'line'
        }]
    };

    option = {
//         backgroundColor: '#2c343c',

        title: {
            text: 'Customized Pie',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
            }
        },

        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: gradeData.sort(function (a, b) {
                    return a.value - b.value;
                }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    };
    var Ctor = Vue.extend(vm)
    new Ctor().$mount('#app')
</script>
</html>